<template>
  <div id="mouse-position"></div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
onMounted(() => {
  // console.log(proxy.$map);
  const map = proxy.$map;
  const gaode = map
    .getLayers()
    .getArray()
    .find((layer) => layer.get("title") === "gaode");

  /* 地图控件 */
  const navControl = new ol.control.ZoomToExtent({
    extent: [100, 30, 140, 30],
  });

  //全屏
  map.addControl(navControl);
  //鹰眼控件
  const overviewMapControl = new ol.control.OverviewMap({
    /* 鹰眼控件样式  */
    className: "ol-overviewmap ol-custom-overviewmap",
    layers: [gaode],
    /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
    collapseLabel: "\u00BB",
    /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
    label: "\u00AB",
    /* 初始为展开显示方式 */
    collapsed: false,
    view: new ol.View({
      projection: "EPSG:4326",
      minZoom: 8,
      maxZoom: 18,
    }),
  });
  map.addControl(overviewMapControl);
  //鼠标移动显示坐标值
  const mousePositionControl = new ol.control.MousePosition({
    /* 坐标格式 */
    coordinateFormat: ol.coordinate.createStringXY(4),
    projection: "EPSG:4326",
    /* 坐标信息显示样式类名,默认是'ol-mouse-position' */
    className: "custom-mouse-position",
    target: document.getElementById("mouse-position"),
    undefinedHTML: "&nbsp",
  });
  map.addControl(mousePositionControl);
});
</script>

<style scoped></style>
